<template>
	<view style="z-index:9999;overflow:hidden;" v-if="status">
		<!-- 蒙版 -->
		<div v-if="mask" class="position-fixed top-0 left-0 right-0 bottom-0"
		:style="getMaskColor"  @click="hide"></div>
		<!-- 弹出框内容 -->
		<div ref="popup" class="position-fixed free-animated" :class="getBodyClass" :style="getBodyStyle">
			<slot></slot>
		</div>
	</view>
</template>

<script>
	// #ifdef APP-PLUS-NVUE
	const animation = weex.requireModule('animation')
	// #endif
	export default {
		
		computed:{
			getMaskColor(){
				let i = this.maskColor? 0.5 : 0
				return `background-color: rgba(0,0,0,${i});`
			},
			getBodyClass(){
				if(this.isCenter){
					
					return 'left-0 right-0 bottom-0 top-0 flex-a-j'
				}
				let bottom = this.fixedBottom ? 'left-0 right-0 bottom-0' :'rounded border'
				return bottom
			},
			getBodyStyle(){
				
				
				let left = this.x > -1 ? `left:${this.x}px;` : ''
				let top = this.y > -1 ? `top:${this.y}px;` : ''
				return left+top
			}
		},
		props:{
			//是否开启蒙版颜色
			maskColor:{
				type:Boolean,
				default:false
			},
			//是否开启蒙版
			mask:{
				 type:Boolean,
				 default:true
				},
			//是否居中
			isCenter:{
				 type:Boolean,
				 default:false
				},
			//是否处于底部
			fixedBottom:{
				type:Boolean,
				default:false
			},
			//弹出层内容高度
			bodyH:{
				type:Number,
				default:0
			},
			//弹出层内容宽度
			bodyW:{
				type:Number,
				default:0
			},
			transformOrigin:{
				type:String,
				default:"left top"
			},
			//其它高度
			tabbarHeight:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				status: false,
				x:-1,
				y:-1,
				maxX:0,
				maxY:0
			}
		},
		mounted() {
			
			try{
				const res = uni.getSystemInfoSync();
				this.maxX = res.windowWidth - uni.upx2px(this.bodyW)
				this.maxY = res.windowHeight - uni.upx2px(this.bodyH)-uni.upx2px(this.tabbarHeight)
				
			}catch(e){
				//TODO handle the exception
			}
		},
		methods:{
			show(x=-1,y=-1){
				
				if(this.status){
					return
				}
				this.x = x >this.maxX ? this.maxX :x
				this.y = y >this.maxY ? this.maxY :y
				this.status=true
				
				// #ifdef APP-PLUS-NVUE
				this.$nextTick(()=>{
					animation.transition(this.$refs.popup, {
					    styles: {
					        transform: 'scale(1,1)',
							transformOrigin:this.transformOrigin,
							opacity:1
					    },
					    duration: 100, //ms
					    timingFunction: 'ease',
					    },()=>{
					        
					    })
				})
				// #endif
				
				
			},
			hide(){
				uni.hideKeyboard()
				this.$emit('hide')
				
				// #ifdef APP-PLUS-NVUE
				
				
				this.$nextTick(()=>{
					animation.transition(this.$refs.popup, {
					    styles: {
					        transform: 'scale(0,0)',
							transformOrigin:this.transformOrigin,
							opacity:0
					    },
					    duration: 0, //ms
					    timingFunction: 'ease',
					    }, ()=> {
							this.status=false
					     
					    })
					
				})
				// #endif
				
				// #ifndef APP-PLUS-NVUE
				this.status=false
				// #endif
			}
		}
		
	}
</script>

<style scoped>
	.free-animated{
		/* #ifdef APP-PLUS-NVUE */
		transform: scale(0,0);
		opacity: 0;
		/* #endif */
	}
</style>
